<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
<section id="chat">
    <div class="chatBody">
    </div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        // 头像数组
        var arr = new Array();
        arr[0] = "head01.jpg";
        arr[1] = "head02.jpg";
        arr[2] = "head03.jpg";

        

        $("#send").click(function(){
            // 获取随机头像
            // 0.999999999*3 = 2.999999999
            var index = Math.floor(Math.random()*3);
            var imgSrc = "./images/" + arr[index];

            // 获取用户输入的信息内容
            var content = $(".chatText").val();
            // 如果内容为空，则点击发送不做任何处理
            // trim() 去除字符串两边的空格
            if(content == "" || content.trim() == ""){
                return;
            }

            // 构建节点信息
            // 字符串创建的新方式 es6 新特性 ````````````
            var str = `<div class="content">
                            <img src="${imgSrc}" alt="">
                            ${content}
                        </div>`;

            // 获取现有的聊天内容
            var history = $(".chatBody").html();

            // 选择要追加的位置
            $(".chatBody").html(history+str);

        });

    })
</script>
</body>
</html>